<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="book" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>云上书屋网上商城—图书商业的先行者：最新、正版、全品类</title>
		<link rel="icon" href="http://47.100.102.177:8080/app/images/common/云上书屋.png" type="image/x-icon" />
		<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/detail/book.css">
		<link rel="stylesheet" type="text/css" href="http://47.100.102.177:8080/app/css/common/nav.css" />
		<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/foot.css">
		<link rel="stylesheet" href="../../boot/plugin/download/font_2801350_33mzkat3aem/iconfont.css">
		<link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/bootstrap.css">
		<script src="http://47.100.102.177:8080/app/js/common/jquery.min.js"></script>
		<script type="text/javascript" src="http://47.100.102.177:8080/app/js/common/bootstrap.min.js"></script>
		<script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
		<script src="../../boot/plugin/layui/layui.js"></script>
		<link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script src="../../boot/plugin/element/vue.js"></script>
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="../../boot/plugin/element/element.css">
		<!-- 引入element 的组件库-->
		<script src="../../boot/plugin/element/element.js"></script>
	</head>
	<body>
		<a name="page-top"></a>
		<div id="head">
			<div id="head_top_lead">
				<div class='nav'>
					<ul>
						<li><img src="http://47.100.102.177:8080/app/images/common/素材-大书.png"></li>
						<li><a href='../index01'>主页</a></li>
						<li><a href='#'>分类</a>
							<ul>
								<li><a href='../index01'>图书</a></li>
								<li><a href='../index02'>电子书</a></li>
							</ul>
						</li>
						<book:if test="${user!=null}">
							<li><a href='#'>${user.uname}</a>
								<ul>
									<li><a href='../car/shoppingcar?account=${user.account}'>购物车</a></li>
									<li><a href='../personal/center?status=1'>个人信息</a></li>
									<li><a href='../order/order'>订单信息</a></li>
								</ul>
							</li>
							<li><a href="/boot/users/exit">安全退出</a></li>
						</book:if>
						<li><a href='../login'>登陆</a></li>
						<li><a href='../login'>注册</a></li>
					</ul>
				</div>
				<div id="logo-search" style="width: 100%;background-color: white;z-index: 999;">
					<div class="logo-search">
						<div class="logo"></div>
						<div class="ls-right">
							<book:if test="${user!=null}">
								<a href='../car/shoppingcar?account=${user.account}' style="text-align: center;line-height: 30px;border-radius: 3px;">
									🛒 购物车
								</a>
							</book:if>
						</div>
						<div class="search">
							<div class="search-top">
								<from>
									<input id="i1" name="title" type="text" placeholder="龙族Ⅳ奥丁之渊" style="border-radius: 3px">
									<!-- <input id="i2" type="button" value="🔍"> -->
									<button id="i2" type="button" style="border-radius: 3px;" onclick="findBookBySearch()">🔍</button>
								</from>
							</div>
							<div class="search-bottom">
								<span>热门搜索</span>
								<ul>
									<li><a href="#">云端定制</a></li>
									<li><a href="#">习大大在福建</a></li>
									<li><a href="#">北京冬奥会</a></li>
									<li><a href="#">贝聿铭全集</a></li>
									<li><a href="#">龙族Ⅲ月黑之潮</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>

				<div class="type" id="type">
					<button type="button" class="all-type">
						<i class="iconfont">&#xe66c;</i>
						<span>全部商品分类</span>
					</button>

					<div style="line-height: 36px;height: 36px;float: left;width: 600px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">
						<span  style="margin-left: 20px;margin-right: 5px;"><a id="book_type" href="../../boot/book/index?bookTypeId=${book.categoryId}"></a></span>/
						<span style="margin-left: 5px;">${book.title}</span>
					</div>
				</div>
			</div>
		</div>
		<div id="body">
			<div class="body-middle">
				<div class="type-left">
					<ul>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=1" class="in-one">艺术</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=2" class="in-one">文学</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=3" class="in-one">动漫</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=4" class="in-one">经管</a>
							</div>
						</li>
						<li>
							<div>
								<a href="../../boot/book/index?bookTypeId=5" class="in-one">童书</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=6" class="in-one">人文</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=7" class="in-one">励志</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=8" class="in-one">生活</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=9" class="in-one">科技</a>
							</div>
						</li>
						<li>
							<div class="type-in">
								<a href="../../boot/book/index?bookTypeId=10" class="in-one">社会</a>
							</div>
						</li>
						<li style="height: 36.5px;">
							<div class="type-in">
								<a href="../../boot/index02" class="in-one">电子书</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="introduce">
					<div class="introduce-left">
						<img src="${book.pictureUrl}" class="right" style="width: 375px;height: 375px;">
						<div class="small-img">
							<a href="#" style="margin-bottom: 0px;"><img src="${book.pictureUrl}" style="width: 65px;height: 65px;"></a>
						</div>
						<div class="share">
							<a href="#" style="float: left;">
								<i class="iconfont">&#xe612;</i>
								分享
							</a>
							<a href="#" id="like" style="float: left;" onclick="collect()">
								<i class="iconfont">&#xe604;</i>
								收藏
							</a>
							<a href="#" id="dislike" style="float: left;" onclick="delCollect()">
								<i class="iconfont">&#xe630;</i>
								取消收藏
							</a>
						</div>
					</div>
					<div class="introduce-right">
						<div class="book-title">
							<h3 id="thisBookName" style="float: left;margin-top: 0px;display: block;overflow: hidden;text-overflow:ellipsis; white-space:nowrap;width: 692px;">${book.title}</h3>
							<span><a id="compay" href="#">${book.compay}</a>&nbsp;编&nbsp;&nbsp;<a id="author" href="#">${book.author}</a>&nbsp;著</span>
						</div>
						<div class="low-pay">
							<div class="pay-img">
								<span class="clock"><i class="iconfont">&#xe602;</i>&nbsp;直降</span>
								<div class="move-clock">
									<span id="parameter" count_down="100000"></span>
								</div>
							</div>
							<div class="pay-num">
								<div class="pn-1">
									<span>
										活动价
										&nbsp;&nbsp;&nbsp;
										<h4 id="nowPrice" style="color: red;display: inline;">￥ ${book.price}</h4>
										<span id="yetPrice" style="text-decoration: line-through;color: #999;font-size: 12px;">￥ ${book.price*2}</span>
									</span>
								</div>
								<div class="pn-2">
									<span>
										优惠券
										&nbsp;&nbsp;&nbsp;
										<h5 style="color: white;background-color: red;display: inline;font-weight: 900;">满50减10</h5>
									</span>
									<span id="more-quan" class="more-quan">
										<a href="#">
											更多优惠券
											<i class="iconfont">&#xe682;</i>
										</a>
									</span>
								</div>
							</div>
							<div id="select-quan" class="select-quan">
								<div class="select-titlt">
									<span style="float: left;">商品优惠券列表</span>
									<span style="float: right;"><a id="close-select" href="#">×</a></span>
								</div>
								<div class="all-quan" style="overflow-y:scroll;">
									<ul>
										<li>
											<h5 style="margin-left: 20px;color: white;background-color: red;display: inline;font-weight: 900;line-height: 52px;">￥10</h5>
											<div style="font-size: 12px;float: right;margin-right: 150px;">
												<p>满￥50减￥10</p>
												<span style="color: #999;">
													<p>领券立减10元优惠</p>
													<p>有效期至<span>2021-9-30</span></p>
												</span>
											</div>
											<button style="display: inline;float: right;right: 30px;position: absolute;top:13px;" type="button" id="have-quan">领取</button>
										</li>
										<li>
											<h5 style="margin-left: 20px;color: white;background-color: red;display: inline;font-weight: 900;line-height: 52px;">￥10</h5>
											<div style="font-size: 12px;float: right;margin-right: 150px;">
												<p>满￥50减￥10</p>
												<span style="color: #999;">
													<p>领券立减10元优惠</p>
													<p>有效期至<span>2021-9-30</span></p>
												</span>
											</div>
											<button style="display: inline;float: right;right: 30px;position: absolute;top:13px;" type="button" class="have-quan">领取</button>
										</li>
										<li>
											<h5 style="margin-left: 20px;color: white;background-color: red;display: inline;font-weight: 900;line-height: 52px;">￥10</h5>
											<div style="font-size: 12px;float: right;margin-right: 150px;">
												<p>满￥50减￥10</p>
												<span style="color: #999;">
													<p>领券立减10元优惠</p>
													<p>有效期至<span>2021-9-30</span></p>
												</span>
											</div>
											<button style="display: inline;float: right;right: 30px;position: absolute;top:13px;" type="button" class="have-quan">领取</button>
										</li>
										<li>
											<h5 style="margin-left: 20px;color: white;background-color: red;display: inline;font-weight: 900;line-height: 52px;">￥10</h5>
											<div style="font-size: 12px;float: right;margin-right: 150px;">
												<p>满￥50减￥10</p>
												<span style="color: #999;">
													<p>领券立减10元优惠</p>
													<p>有效期至<span>2021-9-30</span></p>
												</span>
											</div>
											<button style="display: inline;float: right;right: 30px;position: absolute;top:13px;" type="button" class="have-quan">领取</button>
										</li>
										<li>
											<h5 style="margin-left: 20px;color: white;background-color: red;display: inline;font-weight: 900;line-height: 52px;">￥10</h5>
											<div style="font-size: 12px;float: right;margin-right: 150px;">
												<p>满￥50减￥10</p>
												<span style="color: #999;">
													<p>领券立减10元优惠</p>
													<p>有效期至<span>2021-9-30</span></p>
												</span>
											</div>
											<button style="display: inline;float: right;right: 30px;position: absolute;top:13px;" type="button" class="have-quan">领取</button>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="address">

							<div class="add-2">
								<div class="buy-num">数量</div>
								<input class="min" type="button" value="-" />
								<input class="text_box" id="buy_num" type="text" value="1" style="text-align: center;border-radius: 3px" />
								<input class="add" type="button" value="+" />
							</div>
							<div class="add-3">
								<button id="add3-btn1" type="button" onclick="add_cart(${param.bookId})">加入购物车</button>
								<button id="add3-btn2" type="button" onclick="buyNow(${param.bookId})">立即购买</button>
							</div>
						</div>
					</div>
				</div>

				<div class="all-introduce">
					<div class="allint-top">
						<button class="all-top top-1" type="button">商品详情</button>
						<button class="all-top top-2" type="button">规格属性</button>
						<button class="all-top top-3" type="button">售后政策</button>
						<button class="all-top top-4" type="button">累计评价(<span>${allComment}</span>)</button>
						<button class="all-top top-5" type="button">网友提问</button>
					</div>
					<div class="for for-top1">
						<div class="t1-top">
							<span style="margin-left: 40px;color: #999;">商品编码(ISBN)</span>
							&nbsp;
							<span style="color: black;">${book.bkId}</span>
							<span style="margin-left: 50px;color: #999;">出版时间</span>
							&nbsp;
							<span style="color: black;">${book.date}</span>
							<span style="margin-left: 50px;color: #999;">出版社</span>
							&nbsp;
							<span style="color: black;">${book.compay}</span>
							<span style="margin-left: 50px;color: #999;">作者</span>
							&nbsp;
							<span style="color: black;">${book.author}</span>
						</div>
						<div class="master">

							<a name="mark2"></a>
							<h3>内容简介</h3>
							<div style="margin-left: 20px;height: 5px;width: 80px;background-color:rgb(21,184,215) ;"></div>
							<p>${book.detail}</p>
						</div>
					</div>
					<div class="for for-top2">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th colspan="2">普通信息</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>商品编码(ISBN)</td>
									<td>${book.bkId}</td>
								</tr>
								<tr>
									<td>出版时间</td>
									<td>${book.date}</td>
								</tr>
								<tr>
									<td>出版社</td>
									<td>${book.compay}</td>
								</tr>
								<tr>
									<td>作者</td>
									<td>${book.author}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="for for-top3">
						<h4>正平行货</h4>
						<p>云上书屋网上商城向您保证所售商品均为正品行货,所有商品开具电子发票</p>
						<h4 style="margin-top: 30px;">售后服务承诺</h4>
						<p>1) 云上书屋网上商城支持商品7天内无理由退换货(不影响二次销售),15天内可以换货,以客户收到商品第二日起计算.(食品、酒类等非图书商品非质量问题不予退换)</p>
						<p>2) 平台售后审核人员在客户提交申请后72小时之内完成审核.</p>
						<p>3) 退换货业务均会在自接收到问题商品之日起7日之内处理完成,国家法定节假日不计算在内.</p>
					</div>
					<div class="for for-top4">
						<ul id="comment_ul">

						</ul>
						<div style="height: 60px;margin-left: 300px" id="page">
							<div style="float: left;height: 80px;line-height: 80px;margin-right: 20px;" id="pageNum">共&nbsp;<span style="color: red" id="allComment">${allComment}</span>&nbsp;条记录&nbsp;&nbsp;</div>
							<div style="float: left;height: 80px;line-height: 80px;margin-right: 20px;">&nbsp;<span style="color: red">5</span>&nbsp;条&nbsp;/&nbsp;页</div>
							<div id="app" style="float: left;" onclick="page()">
								<el-pagination background layout="prev, pager, next" :total="${allPage}*10" style="margin-top: 23px;">
								</el-pagination>
							</div>
						</div>
						<div id="empty">
							<el-empty description="暂无评论"></el-empty>
						</div>
					</div>
					<div class="for for-top5">
						<div id="app1" style="margin-bottom: 10px;">
							<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
								点我提问
							</el-button>
							<el-drawer
									title="新的问题"
									:visible.sync="drawer">
								<div style="margin: 20px 0;"></div>
								<el-input
										id="question"
										type="textarea"
										placeholder="请输入内容"
										v-model="textarea"
										maxlength="40"
										:rows="4"
										show-word-limit>
								</el-input>
								<div style="margin: 20px 0;"></div>
								<button style="float: right" type="button" class="layui-btn layui-btn-normal" onclick="addQuestion()">发出问题</button>
							</el-drawer>
						</div>
						<div class="layui-collapse" lay-accordion style="height: 500px;overflow-y: scroll;">
							<book:forEach items="${question}" var="p">
								<div class="layui-colla-item">
									<div class="layui-colla-title" style="height: 105px">
										<div style="width: 100%;height: 42px"><img src="../../boot/imgs/${p.picUrl}" style="width:30px;height: 30px;border-radius: 50%;">&nbsp;
												${p.userName}
											<!-- Button trigger modal -->
											<button type="button" class="btn btn-info" style="float: right;margin-top: 5px;" data-toggle="modal" data-target="#myModal" onclick="answerIt('${p._id}')">
												回答TA
											</button>
										</div>
										<div style="width: 100%;height: 42px;"><span style="color: red">问题:</span>&nbsp;${p.text}</div>
										<div style="width: 100%;height: 21px;text-align: right;line-height: 21px">${p.time}</div>
									</div>
									<div class="layui-colla-content layui-show">
										<book:forEach items="${p.answerTools}" var="a">
											<div style="width: 100%;height: 42px"><img src="../../boot/imgs/${a.picUrl}" style="width:30px;height: 30px;border-radius: 50%;">&nbsp;
													${a.userName}

												<!-- Button trigger modal -->
												<button type="button" class="btn btn-info" style="float: right;margin-top: 5px;" data-toggle="modal" data-target="#myModal1" onclick="replyIt('${a._id}')">
													回复TA
												</button>
											</div>
											<div style="width: 100%;height: 42px;"><span style="color: red">回答:</span>&nbsp;${a.text}</div>
											<div style="width: 100%;height: 21px;text-align: right;line-height: 21px">${a.time}</div>
											<hr>
											<book:forEach items="${a.replyAnswerTools}" var="r">
												<div style="width: 100%;height: 42px"><img src="../../boot/imgs/${r.picUrl}" style="width:30px;height: 30px;border-radius: 50%;">&nbsp;
														${r.userName}

													<!-- Button trigger modal -->
													<button type="button" class="btn btn-info" style="float: right;margin-top: 5px;" data-toggle="modal" data-target="#myModal2" onclick="replyReplyIt('${a._id}','${r._id}')">
														回复TA
													</button>
												</div>
												<div style="width: 100%;height: 42px;"><span style="color: red">对${r.replyThisUserName}的回复:</span>&nbsp;${r.text}</div>
												<div style="width: 100%;height: 21px;text-align: right;line-height: 21px">${r.time}</div>
												<hr>
											</book:forEach>
										</book:forEach>
									</div>
								</div>
							</book:forEach>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="foot">
			<!-- 多快好省start -->
			<div class="dkhs">
				<ul>
					<li>
						<div class="duo"></div>
						<p>品类齐全，轻松购物</p>
					</li>
					<li>
						<div class="kuai"></div>
						<p>多仓直发，急速配送</p>
					</li>
					<li>
						<div class="hao"></div>
						<p>正平行货，精致服务</p>
					</li>
					<li>
						<div class="sheng"></div>
						<p>天天低价，畅选无忧</p>
					</li>
				</ul>
			</div>
			<!-- 多快好省end -->

			<!-- 结尾start -->
			<div class="jiewei">
				<div class="j1">
					<ul>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">关于我们</a></li>
						<li class="line"></li>
						<li><a href="#">English</a></li>
						<li class="line"></li>
						<li><a href="#">Site</a></li>
						<li class="line"></li>
						<li><a href="#">Media & IR</a></li>
						<li class="line"></li>
					</ul>
				</div>
				<div class="j2">
					<p>云上书屋收录的免费书籍作品、频道内容、书友评论、胪上文字图片等其他切内容及在云上书屋所做之广告均属用户个人行为,与本网站无关。</p>
				</div>
				<div class="j3">
					<ul>
						<li class="l1"><a href="#"></a></li>
						<li class="l2"><a href="#"></a></li>
						<li class="l3"><a href="#"></a></li>
						<li class="l4"><a href="#"></a></li>
						<li class="l5"><a href="#"></a></li>
						<li class="l6"><a href="#"></a></li>
					</ul>
				</div>
			</div>
			<!-- 结尾end -->
		</div>
		<div class="return-top">
			<a href="../../boot/personal/center?status=9"><i class="iconfont" style="font-size: 30px;">&#xf8f1;</i></a>
			<a href="#page-top"><i class="iconfont" style="font-size: 30px;">&#xe613;</i></a>
			<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal3">新问题<span class="badge" id="questionNum"></span></button>
		</div>
		<!-- Modal 回答问题-->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">回答此问题<span id="questionId"></span></h4>
					</div>
					<div class="modal-body">
						<textarea id="theAnswer" class="form-control" rows="3"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button id="answerTheQuestion" type="button" class="btn btn-primary" onclick="answerTheQuestion()">提交</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal 回复回答-->
		<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel1">回复回答<span id="answerId"></span></h4>
					</div>
					<div class="modal-body">
						<textarea id="theReply" class="form-control" rows="3"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="repayTheAnswer()">提交</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal 回复回复-->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel2">回复回复<span id="answerId1"></span>&nbsp;<span id="replyId1"></span></h4>
					</div>
					<div class="modal-body">
						<textarea id="theReply1" class="form-control" rows="3"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="repayTheReply()">提交</button>
					</div>
				</div>
			</div>
		</div>

		<!-- Modal 新问题-->
		<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel3">所有新问题</h4>
					</div>
					<div id="newProblem" class="modal-body">
						<book:forEach items="${newQuestions}" var="nq">
							<div style="width: 100%;border: 1px solid #999;border-radius: 3px;margin-bottom: 5px;padding: 3px;">
								<span id="newQuestionId">${nq._id}</span>
								<book:if test="${nq.question.bookTypeId==1}">
									<span>实体书${nq.question.bookId}</span>
								</book:if>
								<book:if test="${nq.question.bookTypeId==2}">
									<span>电子书${nq.question.bookId}</span>
								</book:if>
								<div style="width: 100%;">ID为${nq.question.PId}的用户提出的问题:${nq.question.text}</div>
								<div style="width: 100%;text-align: right">提问时间:${nq.question.time}</div>
								<button type="button" class="btn btn-info" style="margin-top: 3px;" onclick="jumpToDetail(${nq.question.bookId},${nq.question.bookTypeId})">点击查看</button>
								<button type="button" class="btn btn-warning" style="margin-top: 3px;" onclick="delNewQuestion()">删除</button>
							</div>
						</book:forEach>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<script>
			var Main = {
				data() {
					return {
						drawer: false,
						textarea: ''
					};
				}
			};
			var Ctor = Vue.extend(Main)
			new Ctor().$mount('#app1')
			new Vue().$mount('#app');
			new Vue().$mount('#empty');


			$(function(){
				var ws;
				//检测浏览器是否支持webSocket
				if("WebSocket" in window){

					let id = "${people.peopleId}";
					if (id==""){
						id = "0"
					}
					//创建 WebSocket 对象,注意请求路径！！！！
					ws = new WebSocket("ws://127.0.0.1:8081/boot/sendQuestion/"+id);

					//与服务端建立连接时触发
					ws.onopen = function(){
						// alert("与服务端建立连接建立成功！您的客户端ID="+id)
						//模拟发送数据到服务器
						ws.send("你好服务端！我是客户端 "+id);
					}

					//接收到服务端消息时触发
					ws.onmessage = function (evt) {
						let received_msg = evt.data;
						let jsonStr = $.parseJSON( received_msg );

						let questionNum = parseInt($("#questionNum").html())+1;
						$("#questionNum").html(questionNum);

						let str = '';
						str += '<div style="width: 100%;border: 1px solid #999;border-radius: 3px;margin-bottom: 5px;padding: 3px;">';
						if (jsonStr.bookTypeId==1){
							str += '<span>实体书'+jsonStr.bookId+'</span>';
						}else {
							str += '<span>电子书'+jsonStr.bookId+'</span>';
						}
						str += '<div style="width: 100%;">ID为'+jsonStr.PId+'的用户提出的问题:'+jsonStr.text+'</div>';
						str += '<div style="width: 100%;text-align: right">提问时间:'+jsonStr.time+'</div>';
						str += '<button type="button" class="btn btn-info" style="margin-top: 3px;" onclick="jumpToDetail('+jsonStr.bookId+','+jsonStr.bookTypeId+')">点击查看</button>';
						str += '</div>'

						$("#newProblem").append(str);
						console.log(received_msg)
					};

					//服务端关闭连接时触发
					ws.onclose = function() {
						console.error("连接已经关闭.....")
					};
				}else{
					alert("您的浏览器不支持webSocket！")
				}
			})

			$(function (){
				let newQuestion = '${newQuestions}';
				let num = 0;
				if (newQuestion!=''){
					var json = JSON.parse(newQuestion);
					num = json.length;
				}
				$("#questionNum").html(num);
				$('#myModal3').on('shown.bs.modal', function () {
					$('#myInput3').focus()
				})
			})


			if(${ifIn}){
				if(${ifCollect}){
					$("#like").css("display","none");
				}else {
					$("#dislike").css("display","none");
				}
			}else {
				$("#like").css("display","none");
				$("#dislike").css("display","none");
			}

			let just = "${just}";
			let comment_list = ${jsonArray};
			if(just=="true"){
				$("#empty").css("display","none");
				$("#comment_ul").css("display","block");
				$("#page").css("display","block");
				let str = "";
				let comment_ul = document.getElementById("comment_ul");
				for (let i=0;i<comment_list.length;i++){
					str += '<li>';
					str += '<div style="height: 100%;width: 180px;float: left;">';
					str += '<div style="height: 32px;width: 100%;">';
					str += '<div class="head-img" style="background-image: url(/boot/imgs/'+(comment_list[i].people.headUrl)+')"></div>';
					str += '<span style="line-height: 32px;">'+comment_list[i].people.name+'</span>';
					str += '</div>';
					str += '</div>';
					str += '<div class="all-star" style="width: 760px;height: 100%;float: right;">';
					str += '<div>';
					for (let j = 0;j<comment_list[i].commentStar;j++){
						str += '<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>';
					}
					for (let k = 0;k<(5-comment_list[i].commentStar);k++){
						str += '<i class="iconfont">&#xe604;</i>';
					}
					str += '</div>';
					str += '<div>'+comment_list[i].comment+'</div>';
					str += '<div style="text-align: right;">'+comment_list[i].commentTime+'</div>';
					str += '</div>';
					str += '</li>';
				}
				comment_ul.innerHTML = str;
			}else {
				$("#empty").css("display","block");
				$("#comment_ul").css("display","none");
				$("#page").css("display","none");
			}

			function page() {
				str = "";
				let active = document.getElementsByClassName("active")[0];

				let param1 = {nowPage:parseInt(active.innerText),bookId:parseInt(${param.bookId})};
				$.get('/boot/detail/getNowComment',param1,function (res) {
					comment_list = res;
					let str = "";
					let comment_ul = document.getElementById("comment_ul");
					for (let i=0;i<comment_list.length;i++){
						str += '<li>';
						str += '<div style="height: 100%;width: 180px;float: left;">';
						str += '<div style="height: 32px;width: 100%;">';
						str += '<div class="head-img" style="background-image: url(/boot/imgs/'+(comment_list[i].people.headUrl)+')"></div>';
						str += '<span style="line-height: 32px;">'+comment_list[i].people.name+'</span>';
						str += '</div>';
						str += '</div>';
						str += '<div class="all-star" style="width: 760px;height: 100%;float: right;">';
						str += '<div>';
						for (let j = 0;j<comment_list[i].commentStar;j++){
							str += '<i class="iconfont" style="color: rgb(21,184,215);">&#xe630;</i>';
						}
						for (let k = 0;k<(5-comment_list[i].commentStar);k++){
							str += '<i class="iconfont">&#xe604;</i>';
						}
						str += '</div>';
						str += '<div>'+comment_list[i].comment+'</div>';
						str += '<div style="text-align: right;">'+comment_list[i].commentTime+'</div>';
						str += '</div>';
						str += '</li>';
					}
					comment_ul.innerHTML = str;
				});
			}

			function jumpToDetail(bookId,bookTypeId){
				if (bookTypeId==1){
					window.location.href = "../../boot/detail/book?bookId="+bookId;
				}else {
					window.location.href = "../../boot/detail/ebook?ebookId="+bookId;
				}
			}

			function delNewQuestion(){
				let newQuestionId = document.getElementById("newQuestionId").innerHTML;
				$.get('/boot/detail/delNewQuestion',{newQuestionId,newQuestionId},function (res){
					if (res.code=="200"){
						alert(res.msg);
						location.reload();
					}
				})
			}

			function addQuestion(){
				if("${people.peopleId}"!=""){
					let question = document.getElementById("question").value;
					let peopleId = "${people.peopleId}";
					let bookId = "${param.bookId}";
					$.get('/boot/detail/addQuestion',{bookId:bookId,peopleId:peopleId,questionText:question},function (res){
						if (res.code=="200"){
							alert("问题已经发布");
							location.reload();
						}else {
							layer.msg("添加失败");
						}

					})
				}else {
					layer.msg("请先登录");
				}

			}

			function answerIt(_id){
				let bookId = "${param.bookId}";
				let peopleId = "${people.peopleId}";
				let questionId = document.getElementById("questionId");
				questionId.innerHTML = _id;
				$.get('/boot/detail/answerIt',{bookId:bookId,peopleId:peopleId},function (res){
					if(res.code=="200"){
						$('#myModal').on('shown.bs.modal', function () {
							$('#myInput').focus()
						})
						document.getElementById("answerTheQuestion").disabled = false;
						document.getElementById("theAnswer").disabled = false;
					}else {
						document.getElementById("answerTheQuestion").disabled = true;
						document.getElementById("theAnswer").disabled = true;
						layer.msg(res.msg);
					}
				})
			}

			function replyIt(_id){
				let answerId = document.getElementById("answerId");
				answerId.innerHTML = _id;
				$('#myModal1').on('shown.bs.modal', function () {
					$('#myInput1').focus()
				})
			}

			function replyReplyIt(answer_id,replyId){
				let answerId1 = document.getElementById("answerId1");
				answerId1.innerHTML = answer_id;
				let replyId1 = document.getElementById("replyId1");
				replyId1.innerHTML = replyId;

				$('#myModal2').on('shown.bs.modal', function () {
					$('#myInput2').focus()
				})
			}

			function answerTheQuestion(){
				let peopleId = "${people.peopleId}";
				let text = document.getElementById("theAnswer").value;
				let questionId = document.getElementById("questionId").innerHTML;
				$.get('/boot/detail/answerTheQuestion',{questionId:questionId,peopleId:peopleId,text:text},function (res){
					if (res.code=="200"){
						location.reload();
					}else {
						layer.msg("回答失败");
					}
				})
			}

			function repayTheAnswer(){
				let peopleId = "${people.peopleId}";
				let text = document.getElementById("theReply").value;
				let answerId = document.getElementById("answerId").innerHTML;
				$.get('/boot/detail/repayTheAnswer',{peopleId:peopleId,text:text,answerId:answerId},function (res){
					if (res.code=="200"){
						location.reload();
					}else {
						layer.msg("回复失败");
					}
				})
			}

			function repayTheReply(){
				let peopleId = "${people.peopleId}";
				let text = document.getElementById("theReply1").value;
				let answerId = document.getElementById("answerId1").innerHTML;
				let replyId = document.getElementById("replyId1").innerHTML;
				$.get('/boot/detail/repayTheReply',{peopleId:peopleId,text:text,answerId:answerId,replyId:replyId},function (res){
					if (res.code=="200"){
						location.reload();
					}else {
						layer.msg("回复失败");
					}
				})
			}

			function add_cart(bookId){
				let buyNum = document.getElementById("buy_num").value;
				$.get('../../boot/car/addMore',{Id: bookId,buyNum:buyNum},function (res) {
					if(res.code=='200') {
						layer.msg('加入购物车成功!');
					}
					else {
						layer.msg("请先进行登陆！");
					}
				})
			}

			function buyNow(bookId){
				buyNum = document.getElementById("buy_num").value;
				$.get('../../boot/detail/buyMore',{},function (res) {
					if(res.code=='200') {
						$.get("/boot/detail/bookAndAddress",{peopleId:"${people.peopleId}",bookId:bookId,buyNum:buyNum},function (res) {
							layer.msg(res.msg)
						})
						let allPrice = "${book.price}"*1*buyNum;
						let freight = 3*buyNum;
						let totlmoney = (allPrice+freight)*1;
						window.location="/boot/orderindex/orderdetail?price="+allPrice+"&freight="+freight+"&totlmoney="+totlmoney;
					}
					else {
						layer.msg("请先进行登陆！")
					}
				})
			}

			function collect(){
				$.get('/boot/detail/collect',{bookId:"${param.bookId}"},function (res){
					if(res.code=='200') {
						layer.msg('收藏成功!')
					}
					else {
						layer.msg("请先进行登陆！")
					}
				})
			}

			function delCollect(){
				$.get('/boot/detail/delCollect',{bookId:"${param.bookId}"},function (res){
					if(res.code=='200') {
						layer.msg('取消收藏成功!')
					}
				})
			}

			function findBookBySearch(){
				let title=document.getElementById("i1").value;
				window.location="/boot/book/index?name="+title;
			}


			$(function() {
				let param = "typeId="+parseInt("${book.categoryId}");
				$.get('/boot/detail/getBookType',param,function (res){
					let bookType = res;
					$("#book_type")[0].innerHTML = bookType
				});



				// 下面的商品详情
				$(".jump-j").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top1").css("display", "block");
					$(".top-1").css("background", "rgb(21,184,215)");
					$(".top-1").css("color", "white");
				});
				$(".top-1").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top1").css("display", "block");
					$(".top-1").css("background", "rgb(21,184,215)");
					$(".top-1").css("color", "white");
				});
				$(".top-2").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top2").css("display", "block");
					$(".top-2").css("background", "rgb(21,184,215)");
					$(".top-2").css("color", "white");
				});
				$(".top-3").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top3").css("display", "block");
					$(".top-3").css("background", "rgb(21,184,215)");
					$(".top-3").css("color", "white");
				});
				$(".top-4").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top4").css("display", "block");
					$(".top-4").css("background", "rgb(21,184,215)");
					$(".top-4").css("color", "white");
				});
				$(".top-5").click(function() {
					$(".for").css("display", "none");
					$(".all-top").css("background", "#EDEAE9");
					$(".all-top").css("color", "black");
					$(".for-top5").css("display", "block");
					$(".top-5").css("background", "rgb(21,184,215)");
					$(".top-5").css("color", "white");
				});


				// 点击显示和隐藏分类
				$(".all-type").click(function() {
					$(".type-left").slideToggle(500);
				});

				// 收藏,取消收藏
				$("#like").click(function() {
					$("#dislike").css("display", "block");
					$("#like").css("display", "none");
				});
				$("#dislike").click(function() {
					$("#like").css("display", "block");
					$("#dislike").css("display", "none");
				});

				// 所有优惠券显示
				$("#more-quan").click(function() {
					$("#select-quan").css("display", "block");
				});
				$("#close-select").click(function() {
					$("#select-quan").css("display", "none");
				});

				// 添加减少数量
				$(".add").click(function() {
					var t = $(this).parent().find('input[class*=text_box]');
					t.val(parseInt(t.val()) + 1)
				})
				$(".min").click(function() {
					var t = $(this).parent().find('input[class*=text_box]');
					t.val(parseInt(t.val()) - 1)
					if (parseInt(t.val()) < 0) {
						t.val(0);
					}
				});
			});

			//页面中发生滚动事件 页面中所有内容都在window浏览器里 还可以使用document
			window.onscroll = function() {
				//向上卷曲的值和最上面top的div高度进行比较
				var top = document.documentElement.scrollTop; //页面向上卷曲的值
				// var topPart = document.getElementById("topPart");//获取最上面的div
				// var height = topPart.offsetHeight;
				var logoSearch = document.getElementById("logo-search");
				var type = document.getElementById("type");
				if (top >= 135) {
					//给nav设置固定定位 添加类名为fixed
					logoSearch.className = "logo-search fixed";
					//给mainPart盒子设置margin-top的值是 navBar的高度
					type.style.marginTop = logoSearch.offsetHeight + "px";
				} else {
					//取消nav的固定定位
					logoSearch.className = "logo-search";
					type.style.marginTop = "0px";
				}
			};

			// 倒计时
			function lepaiclockdone() {
				setTimeout("lepaiclockdone()", 1000);
				//进行显示倒计时的元素
				$("#parameter").each(function() {
					var obj = $(this);
					//获取时间戳即可
					var tms = obj.attr("count_down");
					var t = obj.attr("timestatus");
					if (t == 2) {
						var html = '距活动结束还有：';
					} else {
						var html = '距活动结束还有：';
					}
					if (tms > 0) {
						tms = parseInt(tms) - 1;
						var days = Math.floor(tms / (1 * 60 * 60 * 24));
						var hours = Math.floor(tms / (1 * 60 * 60)) % 24;
						var minutes = Math.floor(tms / (1 * 60)) % 60;
						var seconds = Math.floor(tms / 1) % 60;

						if (days > 0) {
							html += days + " 天 ";
						}
						if (hours > 0) {
							html += hours + " 时 ";
						}
						if (minutes > 0) {
							html += minutes + " 分 ";
						}
						html += parseInt(seconds) + " 秒 ";
						obj.html(html);
						obj.attr("count_down", tms);
					} else if (tms == 0) {
						// location.href = location.href;
					}
				});
			}
			lepaiclockdone(); //启动倒计时
		</script>
	</body>
</html>
